<template>
  <div class="home" style="margin-bottom:50px">
    <!-- 搜索 -->
    <div class="search">
      <van-icon name="comment-o" size="1.7rem" />
      <van-search v-model="value" placeholder="请输入搜索关键词" />
      <van-icon name="scan" size="1.7rem" />
    </div>

    <!-- 导航 -->
    <div class="nav" style="margin:10">
      <ul>
        <li><a href="#">推荐</a></li>
        <li><a href="#">手机</a></li>
        <li><a href="#">智能</a></li>
        <li><a href="#">电视</a></li>
        <li><a href="#">笔记本</a></li>
        <li><a href="#">家电</a></li>
      </ul>
    </div>

    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <!-- <van-swipe-item v-for="item in banners" :key="item._id"> -->
      <van-swipe-item>
        <img
          alt=""
          src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5d4298059889417157e8492750328492.jpg?w=632&h=340"
        />
      </van-swipe-item>
      <van-swipe-item>
        <img
          alt=""
          src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b30177d629bfbe2fb42251c1b8538f7b.jpg?w=632&h=340"
        />
      </van-swipe-item>
      <van-swipe-item>
        <img
          alt=""
          src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9f18ac756fa2cedb16ea429b9c0001af.png?w=632&h=340"
        />
      </van-swipe-item>
    </van-swipe>

    <!-- 小图标 -->
    <van-grid
      :column-num="4"
      icon-size="50px"
      :square="true"
      class="image-text"
      :border="false"
    >
      <van-grid-item
        :icon="item.img"
        :text="item.name"
        v-for="item in lists"
        :key="item._id"
        class="vg_item"
      />
    </van-grid>

    <!--通知栏  -->
    <van-notice-bar
      left-icon="volume-o"
      :scrollable="false"
      style="margin-bottom:10px;"
    >
      <van-swipe
        vertical
        class="notice-swipe"
        :autoplay="3000"
        :show-indicators="false"
      >
        <van-swipe-item>小米8 青春版全面配色：梦幻蓝全面来袭!</van-swipe-item>
        <van-swipe-item>小米8 青春版全面配色：梦幻蓝全面来袭!</van-swipe-item>
        <van-swipe-item>小米8 青春版全面配色：梦幻蓝全面来袭!</van-swipe-item>
      </van-swipe>
    </van-notice-bar>

    <!-- 列表1 -->
    <div class="list1" style="margin-bottom:10px;">
      <img
        src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/116fc43816b87192be4e67cf762e8da5.jpeg?thumb=1&w=234&h=300&f=webp&q=90"
        alt=""
        class="left"
        style="float:left;width:50%"
      />
      <div class="right">
        <img
          src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b30177d629bfbe2fb42251c1b8538f7b.jpg?w=632&h=340"
          alt=""
          width="50%"
          height="119px"
        />
        <img
          src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9f18ac756fa2cedb16ea429b9c0001af.png?w=632&h=340"
          alt=""
          width="50%"
          height="119px"
        />
      </div>
    </div>
    <img
      src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5d4298059889417157e8492750328492.jpg?w=632&h=340"
      alt=""
      width="100%"
      style="margin-bottom:10px;"
    />
    <!-- 小米闪购 -->
    <div class="shangou" style="margin-bottom:10px;">
      <div class="top">
        <h3>
          小米闪购
        </h3>
        <h4>距下一场</h4>
        <!-- 倒计时 -->
        <van-count-down :time="time">
          <template #default="timeData">
            <span class="block">{{ timeData.hours }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.minutes }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.seconds }}</span>
          </template>
        </van-count-down>
      </div>
      <!-- 小轮播 -->
      <van-swipe :loop="false" :width="120">
        <van-swipe-item
          v-for="item in banners"
          :key="item._id"
          @click="goDetail(item._id)"
        >
          <img :src="item.coverImg" alt="" />
          <h3 class="jiage">￥{{ item.price }}</h3>
        </van-swipe-item>
      </van-swipe>
    </div>
    <img
      alt=""
      width="100%"
      src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b30177d629bfbe2fb42251c1b8538f7b.jpg?w=632&h=340"
    />

    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-grid :border="false" :column-num="2">
        <van-grid-item
          v-for="item in products"
          :key="item._id"
          @click="goDetail(item._id)"
          class="box"
        >
          <van-image :src="item.coverImg" class="img" />
          <div class="bottom">
            <p class="name">{{ item.name }}</p>
            <p class="price">￥{{ item.price }}</p>
          </div>
        </van-grid-item>
      </van-grid>
    </van-list>
  </div>
</template>

<script>
import { reqProducts } from "../../api/products";
// import { get } from "../../utils/request";
export default {
  components: {},
  data() {
    return {
      value: "",
      banners: [],
      products: [], //定义商品列表数组
      loading: false,
      finished: false,
      page: 1,
      time: 30 * 60 * 60 * 1000,
      lists: [
        {
          _id: 0,
          name: "上新精选",
          img:
            "https://img.youpin.mi-img.com/jianyu/3b9f8b4e5a1639cafbb3be08cba9963a.png@base@tag=imgScale&h=100&m=1&q=80&w=100",
        },
        {
          _id: 1,
          name: "小米众筹",
          img:
            "https://img.youpin.mi-img.com/jianyu/531253430ba83f5b88e4ae92cb5a197c.png@base@tag=imgScale&h=100&m=1&q=80&w=100",
        },
        {
          _id: 2,
          name: "小米秒杀",
          img:
            "https://img.youpin.mi-img.com/jianyu/7a255e71670b9ef4a90723223265b5c5.png@base@tag=imgScale&h=100&m=1&q=80&w=100",
        },
        {
          _id: 3,
          name: "小米自营",
          img:
            "https://img.youpin.mi-img.com/jianyu/52ec26cccb4d945aa4bacac4ec7c4622.png@base@tag=imgScale&h=100&m=1&q=80&w=100",
        },
      ],
    };
  },
  computed: {},
  watch: {},

  methods: {
    async getpeoducts() {
      this.loading = true; //刚开始加载数据
      const result = await reqProducts({ page: this.page });
      this.loading = false; //接口调取成功 关闭掉
      /*    console.log(result); */
      this.products = [...this.products, ...result.data.products]; //把上一次的数据和请求过来的数据合并起来
      // 如果返回的数据小于10 说明数据已经加载完了 需要把finished
      if (result.data.products.length < 10) {
        this.finished = true;
      } else {
        this.page++;
      }
    },
    onLoad() {
      this.getpeoducts();
    },
    async getBanners() {
      const result = await reqProducts();
      console.log(result);
      this.banners = result.data.products;
    },

    //点击跳转到详情
    goDetail(id) {
      console.log(id);
      this.$router.push("/detail/" + id);
    },
  },
  created() {
    this.getBanners();
  },
  mounted() {},
};
</script>
<style scoped>
/* 搜索 */
.search {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
}

/* 导航 */
.nav {
  width: 100%;
  height: 30px;
}
.nav ul {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.nav ul li {
  float: left;
  color: #eee;
}
.nav ul li a {
  color: rgb(151, 150, 150);
}
/* 轮播 */
.van-swipe-item img {
  width: 100%;
  display: block;
  margin: 0 auto;
}
.products {
  display: flex;
  justify-content: flex-start;
  padding: 10px;
}
.products img {
  width: 80px;
}
.products .product-r {
  margin-left: 10px;
  flex: 1; /* 把剩下的空间占满 */
}
.van-list {
  padding-bottom: 50px;
}
/* 消息通知 */
.notice-swipe {
  height: 40px;
  line-height: 40px;
}
/* 小米闪购 */
.shangou .top {
  width: 100%;
  height: 40px;
}
.shangou .top h3 {
  display: block;
  color: #fd6528;
  font-weight: 900;
  float: left;
  margin-left: 8px;
  line-height: 25px;
}
.shangou .top h4 {
  display: block;
  color: #4e4e4e;
  font-weight: 900;
  float: left;
  line-height: 25px;
  margin-left: 35%;
}
.shangou .top .van-count-down {
  display: block;
  float: right;
  margin-right: 10px;
}
/* 小轮播 */
.colon {
  display: inline-block;
  margin: 0 4px;
  color: #ee0a24;
}
.block {
  display: inline-block;
  width: 22px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background-color: #ee0a24;
}
.jiage {
  color: #fd6528;
  /* line-height: 15px; */
  font-weight: 700;
  font-size: 18px;
  margin-top: 5px;
  margin-left: 8px;
}
/* 列表 */
.bottom {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  border-radius: 6px;
}
.img {
  width: 130px;
  /* border: 1px solid red; */
}
.name {
  margin: 8px 0;
  font-size: 14px;
  color: rgb(80, 79, 79);
  line-height: 16px;
}
.price {
  color: #fd6528;
  font-size: 17px;
  margin: 6px 0;
}
</style>
